<script type="text/javascript" src="/js/jquery.cycle.all.min.js"></script>

<div class="topBar">
      <div class="topTitle">添加展览</div>
      <div class="topButton"><a href="/admin/manage-exhibition" target="_self">放弃</a></div>
    </div>
	
<?php echo $this->form;?>


<div id="dialog-candidate-form" style="display: none;" title="添加新的展览图片">
	<div id="tabs">
		<ul>
			<li><a href="/admin/tab-form-artist">Artist</a></li>
			<li><a href="/admin/tab-form-style">Style</a></li>
			<li><a href="/admin/tab-form-subject">Subject</a></li>
			<li><a href="/admin/tab-form-tag">Tag</a></li>
			<li><a href="/admin/tab-form-category">Category</a></li>
		</ul>
		<div id="mycontent" style="margin:5px"></div>
	</div>

	
</div>



<style>
<!--
.pics { height: 292px; width: 292px; padding:0; margin:0; overflow: hidden }
.pics img { height: 260px; width: 260px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
	-moz-border-radius: 10px; -webkit-border-radius: 10px;
}
#slideshow { left: 20px }
#nav { width: 300px; margin: 15px }
#nav li { width: 70px; float: left; margin: 8px; list-style: none }
#nav a { width: 70px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
-->
</style>

    

<script>


function loadCandidateArtworks(element){
	var condition = $(element);
	var url = $("#form" + condition.attr("id")).attr("action") + condition.val();
	//var target = "#content"+condition.attr("id");
	var target = "#mycontent";
	//alert(target);
	$(target).load(
			url
			); 

	//$(target).html("wo cao!");
	
}

function removeFromValues(id){
	var artworks = $("#artworks").val().split(",");
	for(i in artworks){
		if(artworks[i] == id){
			artworks.splice(i,1);
		}
	}

	$("#artworks").val(artworks.join(","));
	
}

function addToValues(id){
	var artworks = $("#artworks").val();
	if(artworks == ""){
		$("#artworks").val(id);
	}else{
		$("#artworks").val(artworks + "," + id);
	}

	
}


function addCandidateArtwork(id, small, big){
	$("#nav").append('<li ondblclick="removeCandidateArtwork(' + id + ', this);" id="small-' + id + '"><a href="#"><img src="' + small + '" width="70" height="80" /></a> </li>' +
			'');
	$("#slideshow").append('<img id="big-' + id + '" src="' + big + '" width="260" height="260" /> ');
	addToValues(id);
	$('#slideshow').cycle({
        fx:     'turnDown',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        }
    });
}

function removeCandidateArtwork(id){
	
	$("#small-"+id).remove();
	$("#big-"+id).remove();
	removeFromValues(id);
}

function loadCandidateForm(){
	$("#dialog-candidate-form").dialog({
		autoOpen: false,
		width: 550,
		modal: true
		
	});

	$('#dialog-candidate-form').dialog('open');
	$("#tabs").tabs();
	
}

function initiate(){

	$("#artworks-element").append('<a href="javascript:loadCandidateForm();">编辑</a>');
	
	$("#artworks-element").append('<ul id="nav"> </ul> ');

	$("#artworks-element").append('<div id="slideshow" class="pics">  </div>');


	$.post(
		"/admin/get-artworks-by-ids",
		{ids:$("#artworks").val()},
		function(data){
			var returns = eval(data);
			for(var i in returns){
				addCandidateArtwork(returns[i].id, returns[i].small, returns[i].big);
			}
		}

			);


}

$(function() {
	initiate();
});
</script>
<script src="/ckfinder/ckfinder.js"></script>
<script>
 var editor = CKEDITOR.replace( 'summary' );
 CKFinder.setupCKEditor( editor, { basePath : '/ckfinder/' } ) ;
 </script>